<template>
    <div class="relative h-full flex flex-col items-center w-16 bg-gray-50 border-r border-gray-200">
        <div class="flex flex-col items-center w-full py-4 space-y-5">
            <!-- Profile button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div class="relative w-9 h-9 rounded-full overflow-hidden bg-gray-100 text-gray-500 flex items-center justify-center text-2xl">
                    <i class="fas fa-user-circle text-gray-600"></i>
                    <span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border-2 border-gray-50"></span>
                </div>
            </div>
            
            <!-- Chat/message button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div 
                    class="flex justify-center items-center w-9 h-9 rounded-lg transition-colors duration-200 ease-in-out"
                    :class="[
                        navigationStore.activeIndex === 1 
                            ? 'bg-indigo-600 text-white' 
                            : 'bg-transparent text-gray-500 hover:bg-gray-200'
                    ]"
                    @click="setActive(1)"
                >
                    <i class="fas fa-comment-dots"></i>
                </div>
            </div>
            
            <!-- User/account button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div 
                    class="flex justify-center items-center w-9 h-9 rounded-lg transition-colors duration-200 ease-in-out"
                    :class="[
                        navigationStore.activeIndex === 2 
                            ? 'bg-indigo-600 text-white' 
                            : 'bg-transparent text-gray-500 hover:bg-gray-200'
                    ]"
                    @click="setActive(2)"
                >
                    <i class="fas fa-user-alt"></i>
                </div>
            </div>
            
            <!-- Ghost button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div 
                    class="flex justify-center items-center w-9 h-9 rounded-lg transition-colors duration-200 ease-in-out"
                    :class="[
                        navigationStore.activeIndex === 3 
                            ? 'bg-indigo-600 text-white' 
                            : 'bg-transparent text-gray-500 hover:bg-gray-200'
                    ]"
                    @click="setActive(3)"
                >
                    <i class="fas fa-ghost"></i>
                </div>
            </div>
            
            <!-- Grid/dashboard button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div 
                    class="flex justify-center items-center w-9 h-9 rounded-lg transition-colors duration-200 ease-in-out"
                    :class="[
                        navigationStore.activeIndex === 4 
                            ? 'bg-indigo-600 text-white' 
                            : 'bg-transparent text-gray-500 hover:bg-gray-200'
                    ]"
                    @click="setActive(4)"
                >
                    <i class="fas fa-th-large"></i>
                </div>
            </div>
        </div>
        
        <!-- Bottom buttons (action buttons that don't change active state) -->
        <div class="absolute bottom-0 flex flex-col items-center w-full mt-auto space-y-5">
            <!-- Document/Note button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div 
                    class="flex justify-center items-center w-9 h-9 rounded-lg transition-colors duration-200 ease-in-out bg-transparent text-gray-500 hover:bg-gray-200"
                    @click="triggerAction('document')"
                >
                    <i class="fas fa-file-alt"></i>
                </div>
            </div>
            
            <!-- Settings button -->
            <div class="flex justify-center items-center w-full cursor-pointer">
                <div 
                    class="flex justify-center items-center w-9 h-9 rounded-lg transition-colors duration-200 ease-in-out bg-transparent text-gray-500 hover:bg-gray-200"
                    @click="triggerAction('settings')"
                >
                    <i class="fas fa-cog"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useNavigationStore } from '../stores/navigation'

export default {
    name: 'Bars',
    setup() {
        const navigationStore = useNavigationStore()
        
        return {
            navigationStore
        }
    },
    methods: {
        setActive(index) {
            // Use the store to update active index
            this.navigationStore.setActive(index)
        },
        triggerAction(action) {
            // Emit event for action buttons without changing active state
            this.$emit('action-triggered', action)
        }
    }
}
</script>
